<template>
	<!-- 质量监控 -->
	<view>
		<info v-if="PageCur=='info'" ></info>
		<chengben v-if="PageCur=='chengben'" ></chengben>
		<total v-if="PageCur=='total'" ></total>
		<!-- 底部tab -->
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange" data-cur="info">
				<view :class="['tab-icon-block', PageCur == 'info'?'bg-blue':'bg-white']">
					<text :class="['ph-nenghaoxinxi', 'font-size34', PageCur == 'info'?'text-white':'text-gray']"></text>
				</view>
				<view :class="PageCur=='info'?'text-blue':'text-gray'">能耗信息</view>
			</view>
			<view class="action" @click="NavChange" data-cur="chengben">
				<view :class="['tab-icon-block', PageCur == 'chengben'?'bg-blue':'bg-white']">
					<text :class="['ph-nenghaochengbenqushi', 'font-size34', PageCur == 'chengben'?'text-white':'text-gray']"></text>
				</view>
				<view :class="PageCur=='chengben'?'text-blue':'text-gray'">能耗成本</view>
			</view>
			<view class="action" @click="NavChange" data-cur="total">
				<view :class="['tab-icon-block', PageCur == 'total'?'bg-blue':'bg-white']">
					<text :class="['ph-chengbentongji', 'font-size34', PageCur == 'total'?'text-white':'text-gray']"></text>
				</view>
				<view :class="PageCur=='total'?'text-blue':'text-gray'">成本统计</view>
			</view>
		</view>
	</view>
</template>

<script>
	import chengben from './chengben/index'
	import info from './info/index'
	import total from './total/index'
	export default {
		components: {
			chengben,
			info,
			total
		},
		data() {
			return {
				PageCur: 'info'
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>

